<template>
  <div>
    <div class="liebiao">
      <div
        v-for="(item) in list"
        :key="item.id"
        class="sousuo"
        :class="{'isActive':item.id==activeId}"
        @click="goDetail(item.id)"
      >
        <span class="first">{{item.title}}</span>
        <span class="second">{{item.publishTime}}</span>
      </div>
      <div class="fenye">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          background
          :page-sizes="[2, 5,10]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeId: 1,

      //  参数
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      // 总条数
      total: 0,
      // 思想列表
      list: [],
    };
  },
  created() {
    this.get();
  },
  methods: {
    // 列表
    get() {
      this.Api.getBisk(this.params).then((res) => {
        if (res.code == 0) {
          this.list = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    // 跳转详情
    goDetail(id) {
      this.$router.push({ name: "SX", query: { id: id } });
    },
    // 分页
    //数据条数发生变化
    handleSizeChange(newSize) {
      this.params.pageSize = newSize;
      this.get();
    },
    //翻页触发
    handleCurrentChange(currPage) {
      this.params.pageNum = currPage;
      this.get();
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-table__row {
  height: 74px;
}
/deep/div.cell {
  padding-left: 40px;
}
.data {
  margin-right: 0;
}
.sousuo {
  cursor: pointer;
  width: 100%;
  height: 74px;
  border-bottom: 1px solid #e8e8e8;
  line-height: 74px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
span:hover {
  color: red;
}
.second {
  color: #999999;
}
.first {
  overflow-wrap: break-word;
  color: #333333;
  font-size: 16px;
}
.fenye {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
li span:first-child:hover {
  color: red;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: red;
    color: #FFF;
}
</style>